<template>
    <div class="container" @click="isCloseType ? '' : close()">
      <div class="container-c" :style="{ width: width }" @click.stop="">
        <div class="title">{{ dataTitle }}</div>
        <div class="close point" @click="close()">×</div>
        <div class="box row align-start">
            <div  class="box-operate row-flex-one">
                <!-- @tab-click="handleClick" -->
                <el-tabs v-model="tabsIndex" class="demo-tabs"  >
                    <el-tab-pane label="团队成员" name="0" ></el-tab-pane>
                    <!-- <el-tab-pane label="新成员审核" name="1"></el-tab-pane> -->
                    <!-- <el-tab-pane label="群二维码" name="2"></el-tab-pane> -->
                </el-tabs>
                <div class="list-box">
                    <div v-if="tabsIndex === '0'">
                        <el-input  v-model="searchInput" @input="onSearchInput" placeholder="搜索成员"  />
                        <template v-for="(item,index) in teamList" :key="index">
                            <div class="list-i row " v-if="!searchInput || arr.has(item)">
                                <div class="align-items">
                                    <img class="avatar" src="@/assets/home/staff.png" alt="">
                                    <div class="name color-black font-base power">{{ item.userName }}</div>
                                    <div class="power color-grey font-base" v-if="item.isAdmin">管理员</div>
                                    <div class="power color-grey font-base">{{ item.position }}</div>
                                </div>
                                <el-checkbox v-model="item.isSelect" size="large"  @change="onSelected(item)" />
                            </div>
                        </template>
                    </div>
                </div>
            </div>
            <div  class="box-selected row-flex-one">
                <div class="head">
                    <span class="color-black font-base font-weight">已选 </span>
                    <span class="color-grey font-mini"> ({{ tabsIndex === '0' ? selectedLength : '1' }}名成员)</span>
                </div>
                <!-- 单选 -->
                <div class="tab-list align-items" v-if="selectType !== 'one' && tabsIndex === '0'">
                    <div class="tab-i color-blue font-base align-items justify-center" v-for="(item,index) in ordinarySelectedList" :key="index" >
                        <div>{{ item.userName }}</div>
                        <img src="@/assets/close.png" class="close-img" alt="" @click="onSelected(item)">
                    </div>
                </div>
                <!-- 多选 -->
                <div class="list-box" v-if="tabsIndex === '0'">
                    <div class="list-i row " v-for="(item,index) in ordinarySelectedList" :key="index">
                        <div class="align-items">
                            <img class="avatar" src="@/assets/home/staff.png" alt="">
                            <div class="name color-black font-base power">{{ item.userName }}</div>
                            <div class="power color-grey font-base" v-if="item.isAdmin">管理员</div>
                            <div class="power color-grey font-base">{{ item.position }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="foot-btn row">
            <div></div>
            <div>
                <el-button size="small" @click="close()">取消</el-button>
            <el-button size="small" type="primary" @click="onDetermine">确定</el-button>
            </div>
        </div>
      </div>
    </div>
  </template>
<script lang="ts" >
import { defineComponent } from 'vue'
import { getTeamList } from '@/api/home'
import { shake } from '@/utils/util'
export default defineComponent({
    // selectType == 'one' 是单选
    props: ['dataTitle', 'list', 'width', 'isCloseType', 'selectType'],
    data () {
        return {
            tabsIndex: '0',
            searchInput: '',
            teamList: new Set([]) as any,
            selectedList: new Set([]) as any,
            selectedLength: 0, // 这个是团队成员选择人数
            ordinarySelectedList: [] as any,
            arr: new Set([]) as any // 这里存储的东西是模糊匹配的item
        }
    },
    async created () {
        const result = await getTeamList()
        result.list = result.map((item:any) => {
            return {
                ...item,
                isSelect: false
            }
        })
        this.teamList = result.list
        console.log(this.teamList, 'teamList')
    },
    mounted () {
        console.log('组件卸载')
    },
    methods: {
        // 搜索人因为前段可以拿到使用数据所以 前端来做模糊搜索 更方便使用 new Set 语法
        onSearchInput () {
            shake(():any => {
                console.log(this.searchInput, '搜索')
                this.arr.clear()
                this.teamList.forEach((item:any) => {
                    if (item.userName.includes(this.searchInput)) {
                        this.arr.add(item)
                    }
                })
            })
        },
        onSelected (event:any) {
            // 单选
            if (this.selectType === 'one') {
                if (this.selectedList.has(event)) {
                    this.teamList.forEach((item:any, index:number) => {
                        if (item.userId === event.userId) {
                            this.teamList[index].isSelect = false
                        }
                    })
                    this.selectedList.delete(event)
                    this.ordinarySelectedList = [...this.selectedList]
                    this.selectedLength = this.selectedList.size
                    return
                }
                this.selectedList.clear()
                this.selectedList.add(event)
                this.teamList.forEach((item:any, index:number) => {
                    if (item.userId !== event.userId) {
                        this.teamList[index].isSelect = false
                    }
                })
                this.ordinarySelectedList = [...this.selectedList]
                this.selectedLength = this.selectedList.size
            } else {
                // 多选
                if (this.selectedList.has(event)) {
                    this.teamList.forEach((item:any, index:number) => {
                        if (item.id === event.id) {
                            console.log(item, 'item')
                            this.teamList[index].isSelect = false
                        }
                    })
                    this.selectedList.delete(event)
                    this.ordinarySelectedList = [...this.selectedList]
                    this.selectedLength = this.selectedList.size
                    return
                }
                this.selectedList.add(event)
                this.ordinarySelectedList = [...this.selectedList]
                this.selectedLength = this.selectedList.size
            }
        },
        onDetermine () {
            this.$emit('determine', this.ordinarySelectedList)
        },
        close () {
            this.$emit('close')
            this.$Bus.emit('close2', '关闭了吗')
        }
    }
})
</script>

  <style scoped lang="stylus">
  .container
    width 100vw
    height 100vh
    background rgba(32, 37, 54, 0.6)
    position fixed
    top 0
    left 0
    flex-center()
    z-index 130

  .container-c
    width 900px
    max-height 600px
    overflow auto
    background white
    box-shadow 0px 2px 12px 0px rgba(0, 0, 0, 0.06)
    border-radius 8px
    border 1px solid #E4E7ED
    position relative
    padding 16px

  .container-c::-webkit-scrollbar
    width 10px
    height 1px

  .container-c::-webkit-scrollbar-thumb
    border-radius 10px
    box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
    background #ccc

  .container-c::-webkit-scrollbar-track
    box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
    border-radius 10px
    background #ededed

  .title
    font-size font-normal
    font-weight bold
    color #303133
    padding-bottom 16px
    border-bottom 1px solid #F4F4F7
  .close
    position absolute
    right 20px
    top 16px
    font-size 28px
    color color-grey
    z-index 1000

.box
    border-bottom 1px solid #F4F4F7
    .box-operate
        padding-top 16px
        border-right 1px solid #F4F4F7
        box-sizing: border-box;
.list-box
    padding 16px 16px 16px 0
    box-sizing: border-box;
    overflow-y auto
    height 330px
    .list-i
        margin 12px 0
        padding-right 8px
        box-sizing: border-box;
    .avatar
        width 26px
        height 26px
        margin-right 8px
    .power
        margin-right 12px
.list-box::-webkit-scrollbar {
  /*滚动条整体样式*/
    width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.list-box::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #535353;
}
.list-box::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background   : #ededed;
}

.demo-tabs > .el-tabs__content
  padding 32px
  color #6b778c
  font-size 32px
  font-weight 600
/deep/ .demo-tabs .el-tabs__header.is-top
    margin 0
    width 100%
/deep/ .demo-tabs .el-tabs__nav.is-stretch>*
    text-align left
/deep/ .demo-tabs .el-tabs__nav-wrap::after
    height 1px
    background #F4F4F7
.box-selected
    padding 16px
    .tab-list
        margin-top 33px
        flex-wrap wrap
        .tab-i
            padding 5px 10px 5px 8px
            box-sizing border-box
            background #E5F2FC
            border-radius 4px
            opacity 1
            border 1px solid #D9E6EF
            margin 0 8px 10px 0
        .close-img
            width 10px
            height 10px
            margin-left 7px
        .tab-i:hover
            border 1px solid #1989FA
        .close-img:hover
            background #DCDFE6
            border-radius 50%
.foot-btn
    margin-top 16px
  </style>
